<script setup>
import { ref } from 'vue'
import { reactive } from 'vue'

const message = ref('abc')
const checked = ref(false)
const checkedNames = ref([])
const picked = ref('One')
// const selected = ref('') // 单选
// const selected = ref([]) // 多选值 绑定到一个数组即可
const selected = ref('')

const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])

</script>

<template>
  输入框: <input type="text" :value="text" @input="text => text = $event.target.value">
  <br>
  再来一个 <input v-model="text">


  <p>Message is: {{ message }}</p>
  <input v-model="message" placeholder="edit me" />

  <hr>
  <span>Multiline message is:</span>
  <p style="white-space: pre-line;">{{ message }}</p>
  <!-- textarea是多行文本标签 -->
  <textarea v-model="message" placeholder="add multiple lines"></textarea>
  <hr>
  <!-- 复选框 -->
  <input type="checkbox" id="checkbox" v-model="checked" />
  <label for="checkbox">{{ checked }}</label>

  <hr>
  <!-- 多选复选框 -->
  <div>Checked names: {{ checkedNames }}</div>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
  <label for="mike">Mike</label>

  <hr>
  <!-- 单选按钮 -->
  <div>Picked: {{ picked }}</div>
  <input type="radio" id="one" value="One" v-model="picked" />
  <label for="one">One</label>
  <input type="radio" id="two" value="Two" v-model="picked" />
  <label for="two">Two</label>

  <hr>
  <!-- 单个选择器 -->
  <div>Selected: {{ selected }}</div>
  <select v-model="selected" multiple>
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <hr>
  <!-- v-for动态渲染 -->
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>
  <div>Selected: {{ selected }}</div>

  <hr>
  <!-- `picked` 在被选择时是字符串 "a" -->
  <input type="radio" v-model="picked" value="a" />
  <!-- `toggle` 只会为 true 或 false -->
  <input type="checkbox" v-model="toggle" />
  <!-- `selected` 在第一项被选中时为字符串 "abc" -->
  <select v-model="selected">
    <option value="abc">ABC</option>
  </select>


</template>
